<!-- 服务推广 -->
<template>
  <view class="page">
    <view class="box">
      <view class="group_1">
        <view class="group_2">
          <image :src="user.HeadImgUrl" mode="aspectFill" ></image>
        </view>

        <view class="group_3">
          <text lines="1" class="text_3 hiddenText diyWidth">{{$util.entitiesToUtf16(user.Name)}}</text>
          <view class="section_1">
            <view class="text-group_1" @click="nav_to('/pages/user/te_commis')">
              <text lines="1" class="text_4">{{amount_of_money}}</text>
              <text lines="1" class="text_5">我的收益</text>
            </view>
            <view class="image_3"></view>
            <view class="text-group_1">
              <text lines="1" class="text_4">{{userList.length}}</text>
              <text lines="1" class="text_5">成功邀请</text>
            </view>
          </view>

          <view class="section_2">
            <!-- #ifdef MP-WEIXIN -->
            <view class="text-wrapper_2" @click="nav_to('/pages/user/placard')">
              <text lines="1" class="text_8">专属推广码</text>
            </view>
            <view class="text-wrapper_3">
              <button lines="1" class="text_9" hover-class="none" open-type="share">
                邀请好友
              </button>
            </view>
            <!-- #endif -->

            <!-- #ifdef APP-PLUS -->
            <view class="app_text-wrapper_2" @click="nav_to('/pages/user/placard')">
              <text lines="1" class="text_8">专属推广码</text>
            </view>
            <!-- <view class="text-wrapper_3">
              <text lines="1" class="text_9" @click="shareWX">邀请好友</text>
            </view> -->
            <!-- #endif -->
          </view>
        </view>
      </view>
      <view class="group_4" v-if="userList.length>0">
        <view>
          <view class="text-group_2">
            <text lines="1" class="text_tem text_11">成功邀请</text>
            <text lines="1" class="text_tem text_10">{{userList.length}}</text>
            <text lines="1" class="text_tem text_12">人</text>
          </view>
        </view>
				<scroll-view scroll-y="true" :style="{'max-height':screenHeight <812 ? '28vh' : '36vh'}">
					<view class="block_2" v-for="item in userList" :key="item.ID">
					    <view class="image-text_2">
					      <image :src="item.HeadImgUrl" class="label_wh" mode="aspectFill"></image>
								<view class="name_box">
									<view class="text-group_3">
										{{$util.entitiesToUtf16(item.Name)}}
									</view>
									<view class="Tag" v-if="item.UserType">
										{{item.UserType}}
									</view>
								</view>
								
					    </view>
							
					    <text lines="1" class="text_15">{{getTime(item.CreateTime)}}</text>
					</view>
				</scroll-view>
      </view>  
			<!-- <view class="group_4">
			  <view>
			    <view class="text-group_2">
			      <text lines="1" class="text_tem text_11">成功邀请</text>
			      <text lines="1" class="text_tem text_10">{{userList.length}}</text>
			      <text lines="1" class="text_tem text_12">人</text>
			    </view>
			  </view>
				<scroll-view scroll-y="true" :style="{'max-height':screenHeight <812 ? '28vh' : '36vh'}">
					<view class="block_2" v-for="item in 10" :key="item">
					    <view class="image-text_2">
					      <image src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1717660289394770.jpg" class="label_wh" mode="aspectFill"></image>
					      <text lines="1" class="text-group_3">哈哈哈哈哈哈哈哈哈哈哈</text>
					    </view>
					    <text lines="1" class="text_15">{{getTime('2024-06-10')}}</text>
					</view>
				</scroll-view>
			</view> -->
			<BtmLogo></BtmLogo>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      user:{},
      userList:[],
      amount_of_money: 0,
			screenHeight:''
    };
  },
  onLoad(){
		this.getPhoneInfo()
    this.user = uni.getStorageSync('user');
    this.userListFn()
		this.SaleChannel()
  },
  methods:{
			getPhoneInfo(){
				uni.getSystemInfo({
					success: (res) => {
						this.screenHeight = res.screenHeight
					}
				})
			},
    	async userListFn() {
				let res = await this.$api.post("SaleChannel/MyRecommendUsersV2");
				if(res.code == 0){
          this.userList = res.data;
    //       this.userList.forEach(item => {
				// 	this.amount_of_money += item.UserSaleMoney;
				// });
				  // this.amount_of_money = this.amount_of_money;
        }else{
          this.$pv.msg(res.message)
        }
			},
			async SaleChannel(){
				let res = await this.$api.post('SaleChannel/Detail')
				if(res.code==0){
					this.amount_of_money = res.data.Commission
				}else{
					this.$pv.msg(res.message)
				}
			},
      shareWX() {
				const user = uni.getStorageSync("user");
			
				const pid = user.UserID;
				let id = user.UserID;
			
				const BaseUrl = "http://h5.golf.xiaojusmart.com/#/";
				const paseUrl = `pages/H5/user_detail?id=${id}&pid=${pid}`;
				let sharUrl = BaseUrl + paseUrl;
				let _this = this;
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 5,
					imageUrl: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/golf_home_bg2.jpg',
					title: '【Golfdate】我喜欢在Golfdate约人组局打高尔夫，你也来报名吧',
					miniProgram: {
						id: 'gh_ff1a33213d99',
						path: 'pages/user/user_visitor?id=' + id + '&pid=' + pid,
						type: 0,
						webUrl: sharUrl
					},
					success: (res) => {
						this.$refs.share.close()
					},
					fail(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			
				// this.is_app_share_show = false;
			},
  }
};
</script>


<style lang="scss">
.page {
  background-color: rgba(246, 246, 246, 1);
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  .box {
    background: linear-gradient(to bottom, #FF9918, #FF4D0D);
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    .group_1 {
      background: url(https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721791717045650.png)
        100% no-repeat;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      position: relative;
      padding: 160rpx 310rpx 78rpx 312rpx;
      .group_2 {
          width: 128rpx;
          height: 128rpx;
        > image {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
        }
          display: flex;
					justify-content: center;
					align-items: center;
          flex-direction: column;
          position: relative;
          z-index: 10;
          border-radius: 50%;
          overflow: hidden;
          background-color: white;
          padding: 6rpx;
      }
      .group_3 {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16rpx;
        position: absolute;
        left: 24rpx;
        top: 224rpx;
        width: 702rpx;
        height: 440rpx;
        display: flex;
        flex-direction: column;
        padding: 80rpx 60rpx 34rpx 60rpx;
        box-sizing: border-box;
        .text_3 {
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 32rpx;
          font-family: PingFang-SC-Bold;
          font-weight: normal;
          text-align: right;
          white-space: nowrap;
          line-height: 44rpx;
          align-self: center;
        }
        .section_1 {
          width: 454rpx;
          align-self: center;
          margin-top: 48rpx;
          flex-direction: row;
          display: flex;
          justify-content: space-between;
          .text-group_1 {
            display: flex;
            flex-direction: column;
            align-items: center;
            .text_4 {
              overflow-wrap: break-word;
              color: rgba(51, 51, 51, 1);
              font-size: 48rpx;
              font-family: PingFang-SC-Bold;
              font-weight: normal;
              text-align: right;
              white-space: nowrap;
              line-height: 66rpx;
            }
            .text_5 {
              overflow-wrap: break-word;
              color: rgba(153, 153, 153, 1);
              font-size: 28rpx;
              font-family: PingFang-SC-Medium;
              font-weight: normal;
              text-align: right;
              white-space: nowrap;
              line-height: 40rpx;
            }
          }
          .image_3 {
            width: 2rpx;
            height: 86rpx;
            margin: 12rpx 0 8rpx 0;
            background: #e4e4e4;
          }
        }
        .section_2 {
          width: 582rpx;
          margin-top: 48rpx;
          flex-direction: row;
          display: flex;
          justify-content: space-between;
          .text-wrapper_2 {
            border-radius: 40rpx;
            border: 1px solid #FF6030;
            display: flex;
            flex-direction: column;
            padding: 18rpx 52rpx 18rpx 52rpx;
            .text_8 {
              overflow-wrap: break-word;
              color: #FF6030;
              font-size: 28rpx;
              font-family: PingFang-SC-Bold;
              font-weight: normal;
              text-align: right;
              white-space: nowrap;
              line-height: 40rpx;
            }
          }
          .app_text-wrapper_2{
            margin: 0 auto;
            border-radius: 40rpx;
            border: 1px solid rgba#FF6030;
            display: flex;
            flex-direction: column;
            padding: 18rpx 52rpx 18rpx 52rpx;
            .text_8 {
              overflow-wrap: break-word;
              color: #FF6030;
              font-size: 28rpx;
              font-family: PingFang-SC-Bold;
              font-weight: normal;
              text-align: right;
              white-space: nowrap;
              line-height: 40rpx;
            }
          }
          .text-wrapper_3 {
            background-color: #FF6030;
            border-radius: 40rpx;
            display: flex;
            flex-direction: column;
            padding: 20rpx 68rpx 20rpx 68rpx;
            .text_9 {
              overflow-wrap: break-word;
              color: rgba(255, 255, 255, 1);
              font-size: 28rpx;
              font-family: PingFang-SC-Bold;
              font-weight: normal;
              text-align: right;
              white-space: nowrap;
              line-height: 40rpx;
              &::after{
                border: none;
              }
            }
          }
        }
      }
    }
    .group_4 {
      background-color: rgba(255, 255, 255, 1);
      border-radius: 16rpx;
      align-self: center;
      margin-top: 320rpx;
      width: 702rpx;
      display: flex;
      flex-direction: column;
      padding: 16rpx 24rpx 32rpx 24rpx;
      box-sizing: border-box;
      .text-group_2 {
        margin-bottom: 22rpx;
        display: flex;
        align-items: center;
        .text_tem{
          overflow-wrap: break-word;
          font-family: PingFang-SC-Bold;
          font-weight: normal;
          text-align: right;
          white-space: nowrap;
        }
        .text_10 {
          color: rgba#FF6030;
          font-size: 48rpx;
          letter-spacing: 3rpx;
          margin: 0 10rpx;
        }
        .text_11 {
          color: rgba(51, 51, 51, 1);
          font-size: 28rpx;
          letter-spacing: 2rpx;
        }
        .text_12 {
          color: rgba(51, 51, 51, 1);
          font-size: 32rpx;
          letter-spacing: 2rpx;
        }
      }
			scroll-view{
				max-height: 27vh;
			}
      .block_2 {
        width: 654rpx;
        flex-direction: row;
        display: flex;
        justify-content: space-between;
				margin-bottom: 24rpx;
        .image-text_2 {
          width: 90%;
          flex-direction: row;
          display: flex;
          // justify-content: space-between;
          align-items: center;
          .label_wh {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
          }
					.name_box{
						margin-left: 18rpx;
						display: flex;
						align-items: center;
						.text-group_3 {
							width: 250rpx;
							overflow: hidden;  /*超出部分隐藏*/
							white-space: nowrap;  /*禁止换行*/
							text-overflow: ellipsis; /*省略号*/
						
						  overflow-wrap: break-word;
						  color: rgba(51, 51, 51, 1);
						  font-size: 28rpx;
						  letter-spacing: 2rpx;
						  font-family: PingFang-SC-Bold;
						  font-weight: normal;
						  white-space: nowrap;
						  line-height: 40rpx;
						}
						.Tag{
							width: fit-content;
							height: 44rpx;
							padding: 0 12rpx;
							background: linear-gradient(90deg, rgba(250, 113, 52, 0.05) 0%, rgba(253, 151, 74, 0.21) 100%);
							border-radius: 24rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 24rpx;
							color: #FF6030;
							margin-left: -4rpx;
						}
					}
          
        }
				
        .text_15 {
          overflow-wrap: break-word;
          color: rgba(153, 153, 153, 1);
          font-size: 24rpx;
          font-family: PingFang-SC-Medium;
          font-weight: normal;
          text-align: right;
          white-space: nowrap;
          line-height: 34rpx;
          margin-top: 22rpx;
        }
      }
			.block_2:last-child{
				margin-bottom: 0;
			}
    }
  }
}
</style>